{% extends 'base.html' %}
{% block title %}注册 | 登录{% endblock %}
{% block nav %}注册 | 登录{% endblock %}

{% block css %}
    <link href="../static/assets/css/register.css" rel="stylesheet"/>
{% endblock %}
{% block Sidebar %}
    <div class="sidebar" data-color="orange">
        <!--
    提示1：您可以更改的颜色 侧边栏使用: data-color="blue | green | orange | red | yellow"
-->
        <div class="logo">
            <a href="#" class="simple-text logo-mini">
                <img src="../static/assets/img/taobaologo.png" alt="#"/>
            </a>
            <a href="#" class="simple-text logo-normal">
                电商平台用户行为预测系统
            </a>
        </div>
        <div class="sidebar-wrapper">
            <ul class="nav">
                <li>
                    <a href="{{ url_for('ec.index') }}">
                        <i class="now-ui-icons design_app"></i>
                        <p>仪表盘</p>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('ec.raw_data') }}">
                        <i class="now-ui-icons business_chart-pie-36"></i>
                        <p>原始数据</p>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('ec.visual2') }}">
                        <i class="now-ui-icons education_atom"></i>
                        <p>预测与推荐</p>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for("ec.visual") }}">
                        <i class="now-ui-icons files_single-copy-04"></i>
                        <p>操作日志</p>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('ec.user') }}">
                        <i class="now-ui-icons users_single-02"></i>
                        <p>个人中心</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
{% endblock %}

{% block content %}
    <div class="panel-header panel-header-sm" style="background: linear-gradient(135deg, #F5F5F5 0%, #1c84fc 100%);">
    </div>
    <div class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header ">

                        <div class="rg_layout">
                            <!-- 标题 -->
                            <div class="rg_left">
                                <p id="form-title">新用户注册</p>
                                <p id="form-subtitle">USER REGISTER</p>
                            </div>

                            <!-- 表单区域 -->
                            <div class="rg_center">
                                <!-- 注册表单 -->
                                <div class="form-container" id="register-form">
                                    <form id="register-form" action="/auth/register" method="post">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                                        <table>
                                            <tr>
                                                <td class="td_left"><label for="username">用户名</label></td>
                                                <td class="td_right"><input class="form-control" type="text"
                                                                            id="username" name="username"
                                                                            placeholder="3-20个字符" required>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="td_left"><label for="password">密码</label></td>
                                                <td class="td_right"><input class="form-control" type="password"
                                                                            id="password"
                                                                            placeholder="8-16个字符"
                                                                            name="password" required></td>
                                            </tr>
                                            <tr>
                                                <td class="td_left"><label for="password_confirm">确认密码</label></td>
                                                <td class="td_right"><input class="form-control" type="password"
                                                                            id="password_confirm"
                                                                            name="password_confirm"
                                                                            required></td>
                                            </tr>
                                            <tr>
                                                <td class="td_left"><label for="email">邮箱</label></td>
                                                <td class="td_right"><input class="form-control" type="email" id="email"
                                                                            name="email"
                                                                            required></td>
                                            </tr>

                                            <tr>
                                                <td class="td_left"><label for="captcha">验证码</label></td>
                                                <td class="td_right">
                                                    <input type="text" id="captcha" name="captcha" required>
                                                    <input class="btn btn-outline-secondary" type="button"
                                                           id="captcha-btn" name="captcha-btn" value="发送验证码"
                                                    >
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2" align="center">
                                                    <input class="btn btn-default" type="submit" value="注册"
                                                           id="btn_sub">
                                                </td>
                                            </tr>
                                        </table>
                                    </form>
                                    <div id="register-error" class="alert alert-danger" style="display:none;"></div>
                                </div>

                                <!-- 登录表单 -->
                                <div class="form-container" id="login-form">
                                    <form action="/auth/login" method="post">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                                        <table>
                                            <tr>
                                                <td class="td_left"><label for="email">邮箱</label></td>
                                                <td class="td_right"><input class="form-control" type="email" id="email"
                                                                            name="email" required></td>
                                            </tr>
                                            <tr>
                                                <td class="td_left"><label for="password">密码</label></td>
                                                <td class="td_right"><input class="form-control" type="password"
                                                                            id="password"
                                                                            name="password" required></td>
                                            </tr>
                                            <tr>
                                                <td class="td_left"><label for="image_captcha">验证码</label></td>
                                                <td class="td_right">
                                                    <input type="text" id="image_captcha" name="image_captcha" required>
                                                    <img id="captcha-image" src="/auth/captcha/image" alt="验证码"
                                                         style="cursor: pointer;" onclick="refreshCaptcha()">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2" align="center">
                                                    <input class="btn btn-default" type="submit" value="登录"
                                                           id="btn_login">
                                                </td>
                                            </tr>
                                        </table>
                                    </form>
                                    <div id="login-error" class="alert alert-danger" style="display:none;"></div>
                                </div>
                            </div>

                            <!-- 切换按钮 -->
                            <div class="toggle-buttons">
                                <button class="btn btn-default" onclick="showRegister()">注册</button>
                                <button class="btn btn-default" onclick="showLogin()">登录</button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script src="../static/assets/js/register.js"></script>
    <script src="../static/assets/js/register2.js"></script>

{% endblock %}